<!DOCTYPE html>

<!-- $Id: select.html 31 2012-08-21 07:22:44Z azbitnev@gmail.com $ -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<title>select</title>

<link href="960c12.css" rel="stylesheet" type="text/css"/>

<link href="http://dl.dropbox.com/u/68550731/red-sparkle/red.sparkle.min.css" rel="stylesheet" type="text/css"/> 
<!--[if IE]><link href="http://dl.dropbox.com/u/68550731/red-sparkle/red.sparkle.ie.min.css" rel="stylesheet" type="text/css"/><![endif]-->

<link href="../release/themes/grey.min.css" rel="stylesheet" type="text/css"/> 

<script src="http://code.jquery.com/jquery.min.js" charset="utf-8" type="text/javascript"></script>
<script src="../release/jquery.ys.min.js"></script>

<style>

body { margin: 1em; }

.ex4 .item img { float: left; margin-right: 1em; margin-top: 1em; }

.ex7 .selected {
	display: none;
}

.ex7 .top {
	height: 4px;
	background: #FF0498;
}
.ex7 .bottom {
	height: 10px;
	background: url(select/ex7-bottom.png);
}
.ex7 .current {
	background-image: url(select/ex7-disclosure-arrow.png);
}

.ex7 .items {
	margin: 0 !important;
	width: 170px !important;
}

.ex7 .item {
	padding-left: 10px;
	border: 0;
	background: #eee;
}
.ex7 .item, .ex7 .item * {
	color: #FF0498 !important;
}
.ex7 .item:hover {
	background: #eee;
}
.ex7 .item:hover a {
	color: #aF0458 !important;
}

.ex7 .ys-list {
	filter: none;
}

.ex7 > .current > div {
	margin-right: 0.2em;
}

.ex7 .ys-list {
	width: 170px;
	margin-top: -1px;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	border: 0;
	max-height: none !important;
}

.ex7 {
	border: 0;
}

.ex7 .current {
	font-size: 1.2em;
	font-style: italic;
	color: #FF0498;
	border-bottom: 1px dashed #FF0498;
	width: 138px;
}

</style>

<script>

$(document).ready(function () {

	function getItemHtml($opt) {
		var html = $opt.data('ys-html')
		return (html ? html : $opt.text())
	}	

	$.ys.select.create('#ex1', { action: 'click', scrollbars: 'vertical', searchbox: true })

	$.ys.select.create('#ex2', { scrollbars: 'vertical' })

	$.ys.select.create('#ex3')

	$.ys.select.create('#ex4', { getItemContent: getItemHtml })

	$.ys.select.create('#ex5')

	$.ys.select.create('#ex6', { scrollbars: 'native' })

	$.ys.select.create('#ex7', { action: 'hover', getItemContent: getItemHtml, scrollbars: 'none' })
		.change(function () {
			$(this).children('option[value=1]').attr('selected', 'selected')
		})

	$('#ex1').change(function () {
		if (window.console && window.console.log)
			window.console.log('#ex1 changed to', $(this).val())
	})

	$.ys.select.create('#ex8')

	$('#ex9').change(function () {
		if (window.console && window.console.log)
			window.console.log('#ex9 changed to', $(this).val())
	})

	$.ys.select.create('#ex9')

	$.ys.select.create('#ex10', { action: 'click', scrollbars: 'vertical', searchbox: true })

	$.ys.select.create('#ex11', { scrollbars: 'native' })
})

</script>

</head>

<body>

	<!-- example #1 -->

	<select class="ex1-class" id="ex1">
		<option value="101">Opt 101</option>

		<option value="111">Opt 111</option>
		<option value="112">Opt 112</option>
		<option value="113">Opt 113</option>
		<option value="114">Opt 114</option>
		<option value="115">Opt 115</option>
		<option value="116">Opt 116</option>
		<option value="117">Opt 117</option>
		<option value="118">Opt 118</option>
		<option value="119">Opt 119</option>
		<option value="111.11">Opt 111.11</option>
		<option value="112.11">Opt 112.11</option>
		<option value="113.11" disabled="yes">Opt 113.11</option>
		<option value="114.11">Opt 114.11</option>
		<option value="115.11">Opt 115.11</option>
		<option value="116.11">Opt 116.11</option>
		<option value="117.11">Opt 117.11</option>
		<option value="118.11">Opt 118.11</option>
		<option value="119.11">Opt 119.11</option>

		<option value="202">Opt 202</option>
		<option value="303">Opt 303</option>
		<option value="404">Opt 404</option>
		<option value="505">Opt 505</option>
		<option value="606">Opt 606</option>
		<option value="707">Opt 707</option>
		<option value="808">Opt 808</option>
		<option value="909">Opt 909</option>
		<option value="212" disabled="yes">Opt 212</option>
		<option value="313" disabled="yes">Opt 313</option>
		<option value="414">Opt 414</option>
		<option value="515">Opt 515</option>
		<option value="616">Opt 616</option>
		<option value="717">Opt 717</option>
		<option value="818" selected="yes">Opt 818</option>
		<option value="919">Opt 919</option>

	</select>

	<!-- example #2 -->

	<select class="ex2-class1 ex2-class2" id="ex2">
		<option value="101">Opt 101</option>
		<option value="202">Opt 202</option>
		<option value="303">Opt 303</option>
	</select>

	<!-- example #3 -->

	<select class="ex3-class" id="ex3"></select>

	<!-- example #4 -->

	<select id="ex4" class="ex4">
		<option value="11" data-ys-html="<img src=&quot;&quot;/><span>Lorem ipsum dolor sit amet, mel odio alia verear an. Ad vim reque labores, mel habemus tibique probatus ut. Vel ei oratio accumsan, no mei malis iudico oratio. Fuisset petentium gubergren per cu, id harum eirmod quo. Est cu duis forensibus reprimique, primis nusquam neglegentur ne pri. Quis novum movet an eum. Mei id erat noluisse urbanitas.</span>">Lorem ispum...</option>
		<option value="12" selected="yes" data-ys-html="<img src=&quot;&quot;/><span>Vim in facer possit inermis, sea hinc prodesset ad. Et ipsum denique qui, quidam quodsi pericula vis te. Quo melius scripta an. Te vel petentium gubergren, ei his epicurei patrioque. Alia zril at est, qui graeci oblique moderatius ea.</span>">Vim in facer...</option>
		<option value="13" data-ys-html="<img src=&quot;&quot;/><span>Te graeci gubergren euripidis his, ea sit quas melius praesent. Dicat nihil maiorum ut eos. In sed putent prompta, dolor interpretaris conclusionemque mel ei, eius partem soluta sed at. Oblique platonem ad duo, sed an autem fugit. Mel omnesque probatus adipisci at. Eu fabulas senserit eum, eos no possim nusquam honestatis.</span>">Te graeci gubergren...</option>
		<option value="14" data-ys-html="<img src=&quot;&quot;/><span>Ex quo tantas ornatus. Euismod tacimates ei sed, his invenire dissentias ne. Et mundi legere ullamcorper est, integre denique usu te, prompta fuisset eloquentiam in vis. Mei eu legimus mentitum. An iudicabit euripidis neglegentur qui, nec ea tantas minimum rationibus, at eam posse quaestio sadipscing. Veri convenire vim ex, stet suscipiantur sea eu. Quando facete reprehendunt eos at, probo zril voluptatibus pro ad.</span>">Ex quo tantas...</option>
	</select>

	<!-- example #5 -->

	<select id="ex5" disabled="disabled">
		<option>Disabled...</option>
	</select>

	<!-- example #6 -->

	<select id="ex6">
		<option value="101">Opt 101</option>
		<option value="202">Opt 202</option>
		<option value="303">Opt 303</option>
		<option value="404">Opt 404</option>
		<option value="505">Opt 505</option>
		<option value="606">Opt 606</option>
		<option value="707">Opt 707</option>
		<option value="808">Opt 808</option>
		<option value="909">Opt 909</option>
		<option value="111" disabled="yes">Opt 111</option>
		<option value="212" disabled="yes">Opt 212</option>
		<option value="313" disabled="yes">Opt 313</option>
		<option value="414">Opt 414</option>
		<option value="515">Opt 515</option>
		<option value="616">Opt 616</option>
		<option value="717">Opt 717</option>
		<option value="818" selected="yes">Opt 818</option>
		<option value="919">Opt 919</option>
	</select>

	<hr/>

	<!-- example #7 -->

	<select id="ex7" class="ex7">
		<option value="1">Other examples</option>
		<option value="2" data-ys-html="&raquo; <a href=&quot;../autocomplete/&quot;>autocomplete</a>">autocomplete</option>
		<option value="3" data-ys-html="&raquo; <a href=&quot;../scrollable/&quot;>scrollable</a>">scrollable</option>
		<option value="4" data-ys-html="&raquo; <a href=&quot;../starating/&quot;>starating</a>">starating</option>
		<option value="5" data-ys-html="&raquo; <a href=&quot;../placeholder/&quot;>placeholder</a>">placeholder</option>
	</select>

	<!-- example #8 -->

	<select id="ex8" class="ex8" data-ys-select-searchbox="on">
		<option value="101">Opt 101</option>
		<option value="202">Opt 202</option>
		<option value="303">Opt 303</option>
	</select>

	<!-- example #9 -->

	<select class="ex9" id="ex9" style="display: none">
		<option value="101">Opt 101</option>
		<option value="202" selected="yes">Opt 202</option>
		<option value="303">Opt 303</option>
		<option value="404" disabled="yes">Opt 404</option>
		<option value="505">Opt 505</option>
	</select>

	<div class="ys-select ex9">
		<div class="current ys-disclosure"><div>Opt 202</div></div>
		<div class="ys-list">
			<div>
				<div class="top"></div>
				<div class="items ys-no-scrollbar-vertical native">
					<div class="item" data-ys-value="101">Opt 101</div>
					<div class="item selected" data-ys-value="202">Opt 202</div>
					<div class="item" data-ys-value="303">Opt 303</div>
					<div class="item ys-disabled" data-ys-value="404">Opt 404</div>
					<div class="item" data-ys-value="505">Opt 505</div>
				</div>
				<div class="right"></div>
				<div class="bottom"></div>
			</div>
		</div>
	</div>

	<!-- example #10 -->

	<select class="ex10-class" id="ex10" style="display: none">
		<option value="101">Opt 101</option>

		<option value="111">Opt 111</option>
		<option value="112">Opt 112</option>
		<option value="113">Opt 113</option>
		<option value="114">Opt 114</option>
		<option value="115">Opt 115</option>
		<option value="116">Opt 116</option>
		<option value="117">Opt 117</option>
		<option value="118">Opt 118</option>
		<option value="119">Opt 119</option>
		<option value="111.11">Opt 111.11</option>
		<option value="112.11">Opt 112.11</option>
		<option value="113.11" disabled="yes">Opt 113.11</option>
		<option value="114.11">Opt 114.11</option>
		<option value="115.11">Opt 115.11</option>
		<option value="116.11">Opt 116.11</option>
		<option value="117.11">Opt 117.11</option>
		<option value="118.11">Opt 118.11</option>
		<option value="119.11">Opt 119.11</option>

		<option value="202">Opt 202</option>
		<option value="303">Opt 303</option>
		<option value="404">Opt 404</option>
		<option value="505">Opt 505</option>
		<option value="606">Opt 606</option>
		<option value="707">Opt 707</option>
		<option value="808">Opt 808</option>
		<option value="909">Opt 909</option>
		<option value="212" disabled="yes">Opt 212</option>
		<option value="313" disabled="yes">Opt 313</option>
		<option value="414">Opt 414</option>
		<option value="515">Opt 515</option>
		<option value="616">Opt 616</option>
		<option value="717">Opt 717</option>
		<option value="818" selected="yes">Opt 818</option>
		<option value="919">Opt 919</option>

	</select>

	<div class="ys-select ex10-class">
		<div class="current ys-disclosure"><div>Opt 818</div></div>
		<div class="ys-list">
			<div>
				<div class="top"></div>
				<input type="text" class="ys-search field"/>
				<div class="items">
					<div class="item" data-ys-value="101">Opt 101</div>
					<div class="item" data-ys-value="111">Opt 111</div>
					<div class="item" data-ys-value="112">Opt 112</div>
					<div class="item" data-ys-value="113">Opt 113</div>
					<div class="item" data-ys-value="114">Opt 114</div>
					<div class="item" data-ys-value="115">Opt 115</div>
					<div class="item" data-ys-value="116">Opt 116</div>
					<div class="item" data-ys-value="117">Opt 117</div>
					<div class="item" data-ys-value="118">Opt 118</div>
					<div class="item" data-ys-value="119">Opt 119</div>
					<div class="item" data-ys-value="111.11">Opt 111.11</div>
					<div class="item" data-ys-value="112.11">Opt 112.11</div>
					<div class="item ys-disabled" data-ys-value="113.11">Opt 113.11</div>
					<div class="item" data-ys-value="114.11">Opt 114.11</div>
					<div class="item" data-ys-value="115.11">Opt 115.11</div>
					<div class="item" data-ys-value="116.11">Opt 116.11</div>
					<div class="item" data-ys-value="117.11">Opt 117.11</div>
					<div class="item" data-ys-value="118.11">Opt 118.11</div>
					<div class="item" data-ys-value="119.11">Opt 119.11</div>
					<div class="item" data-ys-value="202">Opt 202</div>
					<div class="item" data-ys-value="303">Opt 303</div>
					<div class="item" data-ys-value="404">Opt 404</div>
					<div class="item" data-ys-value="505">Opt 505</div>
					<div class="item" data-ys-value="606">Opt 606</div>
					<div class="item" data-ys-value="707">Opt 707</div>
					<div class="item" data-ys-value="808">Opt 808</div>
					<div class="item" data-ys-value="909">Opt 909</div>
					<div class="item ys-disabled" data-ys-value="212">Opt 212</div>
					<div class="item ys-disabled" data-ys-value="313">Opt 313</div>
					<div class="item" data-ys-value="414">Opt 414</div>
					<div class="item" data-ys-value="515">Opt 515</div>
					<div class="item" data-ys-value="616">Opt 616</div>
					<div class="item" data-ys-value="717">Opt 717</div>
					<div class="item selected" data-ys-value="818">Opt 818</div>
					<div class="item" data-ys-value="919">Opt 919</div>
				</div>
				<div class="right">
					<div class="ys-scrollbar-vertical">
						<div class="track-piece"></div>
						<div class="thumb"></div>
						<div class="track"></div>
					</div>
				</div>
				<div class="bottom"></div>
			</div>
		</div>
	</div>

	<!-- example #11 -->

	<select class="ex11-class" id="ex11" data-ys-select-searchbox="on">
		<option value="101">Opt 101</option>

		<option value="111">Opt 111</option>
		<option value="112">Opt 112</option>
		<option value="113">Opt 113</option>
		<option value="114">Opt 114</option>
		<option value="115">Opt 115</option>
		<option value="116">Opt 116</option>
		<option value="117">Opt 117</option>
		<option value="118">Opt 118</option>
		<option value="119">Opt 119</option>
		<option value="111.11">Opt 111.11</option>
		<option value="112.11">Opt 112.11</option>
		<option value="113.11" disabled="yes">Opt 113.11</option>
		<option value="114.11">Opt 114.11</option>
		<option value="115.11">Opt 115.11</option>
		<option value="116.11">Opt 116.11</option>
		<option value="117.11">Opt 117.11</option>
		<option value="118.11">Opt 118.11</option>
		<option value="119.11">Opt 119.11</option>

		<option value="202">Opt 202</option>
		<option value="303">Opt 303</option>
		<option value="404">Opt 404</option>
		<option value="505">Opt 505</option>
		<option value="606">Opt 606</option>
		<option value="707">Opt 707</option>
		<option value="808">Opt 808</option>
		<option value="909">Opt 909</option>
		<option value="212" disabled="yes">Opt 212</option>
		<option value="313" disabled="yes">Opt 313</option>
		<option value="414">Opt 414</option>
		<option value="515">Opt 515</option>
		<option value="616">Opt 616</option>
		<option value="717">Opt 717</option>
		<option value="818" selected="yes">Opt 818</option>
		<option value="919">Opt 919</option>

	</select>

	<!-- lorem ispum dolor sit a met -->

	<p>Lorem ipsum dolor sit amet, eu sit rebum corrumpit. Ea dicunt pertinax temporibus sea, duis veri eu per, nec malis appetere at. Timeam salutatus ea nam. Cu nec brute deseruisse. Purto wisi porro at nam, nam vide ipsum virtute ut.</p>
	<p>An ancillae nominati erroribus ius, ea petentium intellegam philosophia sea. Mei malis error consequuntur in, mei ne mediocrem percipitur, est ea graecis alienum. Mollis accusamus his ei, no duo utinam impetus. Ut congue repudiandae his, ad sit tempor dolorum intellegebat. Est meliore similique deseruisse cu.</p>
	<p>Cu usu percipit cotidieque. Esse dicta cotidieque cum ut, equidem fierent nominati quo cu. Accusata maluisset assentior te quo. Cum errem aperiam praesent te, no dicat numquam vituperatoribus est, habemus erroribus usu ei. Per ad diam dissentias, an inani libris cum, oporteat intellegebat has ex. At ferri simul fuisset qui, tritani equidem gloriatur quo in, cu iudico sanctus his.</p>
	<p>Ei vim wisi adversarium. Mel no perpetua sapientem suscipiantur. Omnis ornatus insolens pri ut, labores complectitur et qui. Eros verterem mea cu, cu albucius tincidunt elaboraret qui, eum clita nullam graeci cu. Ex homero quaestio prodesset mei.</p>
	<p>Mea cu audiam offendit conceptam, ut dictas fabulas corpora vim. Probatus sapientem ullamcorper cu qui, in consectetuer necessitatibus vix. Nam noster contentiones deterruisset ad. Cu vim oratio invenire. Scripta recusabo ex sit, sea an zril causae, ad sed vide dignissim repudiandae. Nam eu convenire aliquando, quo id brute mollis. Sed et atqui audire invenire, mutat mentitum molestiae pro id, has purto simul soleat ad.</p>

</body>
